<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <script src="./static/js/vue.global.js"></script>
    <script  src="./static/element-plus/index.full.js"></script>
   
    <link rel="stylesheet" href="./static/element-plus/index1.css">
   
</head>
<body>
 <div id="app">
    <el-container>
          <el-main>
             <el-row>
                <el-col :sm="24" :lg="8"></el-col>
                <el-col :sm="24" :lg="8">
                 <h2>vue.js 实现获取表单元素</h2>
                    <el-form v-bind:model="formData" label-width="100px">

                       <el-form-item label="用户名">
                         <el-input v-model="formData.name"></el-input>
                       </el-form-item>
                       <el-form-item label="密码:">
                         <el-input type="password" v-model="formData.password"></el-input>
                       </el-form-item>
                       <el-form-item label="性别:">
                         <el-radio-group v-model="formData.gender">
                            <el-radio label="男" checked>男</el-radio>
                            <el-radio label="女">女</el-radio>
                         </el-radio-group>
                       </el-form-item>
                       <el-form-item label="兴趣爱好">
                         <el-checkbox-group v-model="formData.hobby">
                            <el-checkbox label="阅读">阅读</el-checkbox>
                            <el-checkbox label="运动">运动</el-checkbox>
                            <el-checkbox label="旅行">旅行</el-checkbox>
                            <el-checkbox label="数码">数码</el-checkbox>
                         </el-checkbox-group>
                       </el-form-item>
                       <el-form-item label="职业">
                           <el-select v-model="formData.job">
                              <el-option value="前端开发工程师">前端开发工程师</el-option>
                              <el-option value="后端开发工程师">后端开发工程师</el-option>
                              <el-option value="产品设计师">产品设计师</el-option>
                              <el-option value="运维工程师">运维工程师</el-option>
                           </el-select>
                       </el-form-item>
                       <el-form-item label="自我介绍">
                         <el-input type="textarea" v-model="formData.intro"></el-input>
                       </el-form-item>
                       <el-form-item>
                        <el-button type="primary" value="确认">确认</el-button>
                       </el-form-item> 
                   </el-form>
                   </el-col>
                   <el-col :sm="24" :lg="8"></el-col>
                </el-row>
      </el-main>
       <el-footer>
        <div>
            <h3>请确认注册信息</h3>
            <p>用户名:{{formData.name}}</p>
            <p>性别:{{formData.gender}}</p>
            <p>兴趣爱好:{{formData.hobby.toString(',')}}</p>
            <p>职业:{{formData.job}}</p>
            <p>自我介绍:{{formData.intro}}</p>
         </div>   
       </el-footer>
    </el-container>
         
    </div>
</body>
  <script>
       const App={
        data(){
         return{
             formData:{
                name:"",
                password:'',
                gender:'',
                hobby:[],
                job:'',
                intro:''
             }
         }
        },
        methods:{
      confirm(){
        this.dia
      }
        }
       }
       Vue.createApp(App).use(ElementPlus).mount("#app")
  </script>
</html>